<!-- 畅游鰼国二级页面 -->
<template>
  <div class="sightseeing-tour-secondary">

    <div class="breadcrumb">
      您当前的位置：
      <span @click="toSightseeingTour" style="color:#39ADFF; cursor:default">畅游鰼国 > </span>&nbsp;
      <span>{{breadcrumbCon}}</span>
    </div>

<!-- 食遍习水 ok123 -->
    <div v-if="this.$route.params.type === '2-1'">
      <tab :tabs="tabsEat" :homeImg="homeImg" :homeImgBg="homeImgBg" @tabClick="tabClickEat">

        <div class="entertainment" v-if="tabItemShowNum === '0' || tabItemShowNum === '1'">
          <div class="entertainment-item" v-for="(item, index) in eatAllData" :key="item.id"  @click="toDetail(item)">
            <alone-img-zoom :aloneWidth="380" :aloneHeight="290" :imgZoomData="eatAllData[index]">
              <span slot="content">
                <p class="eatMopUp">{{item.dishesIntro}}</p>
              </span>
            </alone-img-zoom>
          </div>
        </div>

        <!-- 美食街地图 -->
        <div v-else-if="this.$route.params.type === '2-1' && tabItemShowNum === '2'">
          <div id="StreetOfDelicacies" style="height: 560px; margin: 30px 75px; border: 1px solid #e6e6e6;"></div>
        </div>

      </tab>
    </div>
    <!-- 名店分页 -->
    <div v-if="this.$route.params.type === '2-1' && this.tabEat === '1' && tabItemShowNum === '1'" class="pagination-con">
      <el-pagination
        layout="prev, pager, next"
        @current-change="hotelCurrentChange"
        :total="hotelTotalEat"
        :page-size="12">
      </el-pagination>
    </div>

    <!-- 名菜分页 -->
    <div v-if="this.$route.params.type === '2-1' && this.tabEat === '0' && tabItemShowNum === '0'" class="pagination-con">
      <el-pagination
        layout="prev, pager, next"
        @current-change="hotelCurrentChange"
        :total="hotelTotalEatSing"
        :page-size="12">
      </el-pagination>
    </div>

<!-- 住在习水 ok123 -->
  <div  v-if="this.$route.params.type === '2-2'">
    <div class="img_card">
      <div class="img_card-all"
        :class="{imgZoomBorder: showBorder}"
        v-for="item in hotelDatas"
        :key="item.id"
        @click="hotelItemClick(item)">
        <div class="img-range">
          <img class="img_card-con" v-lazy="item.thumbnailId" alt="">
        </div>
        <div class="title">
          <i class="el-icon-menu"></i>
          {{ item.name }}
        </div>
        <ul class="sightseeing-ul">
          <li>
            <i class="iconfont icon-dianhua"></i>
            <span>电话：{{ item.phone }}</span>
          </li>
          <li>
            <i class="iconfont icon-weizhi"></i>
            <span>地址： {{ item.address }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div v-if="this.$route.params.type === '2-2'" class="pagination-con">
      <el-pagination
        layout="prev, pager, next"
        @current-change="hotelCurrentChange"
        :page-size="hotelPageSize"
        :total="hotelTotal">
      </el-pagination>
    </div>
  </div>

<!-- 娱享习水 ok123 -->
    <div  v-if="this.$route.params.type === '2-6'">

        <div class="entertainment">
          <div
            class="entertainment-item"
            v-for="(item, index) in amusementListData"
            :key="item.id"
            @click="toDetail(item)">
            <alone-img-zoom :aloneTag="item.aloneTag" :aloneWidth="380" :aloneHeight="290" :imgZoomData="amusementListData[index]">
              <span slot="content">
                <div class="title">
                  <i class="el-icon-menu"></i>
                  {{item.title}}
                  </div>
                <ul class="sightseeing-ul">
                  <li>
                    <i class="iconfont icon-dianhua"></i>
                    <span>电话：{{item.phone}}</span>
                  </li>
                  <li>
                    <i class="iconfont icon-weizhi"></i>
                    <span style="width: 300px">地址：{{item.address}}</span>
                  </li>
                </ul>
              </span>
            </alone-img-zoom>
          </div>
        </div>

    </div>

    <div v-if="this.$route.params.type === '2-6'" class="pagination-con">
      <el-pagination
        layout="prev, pager, next"
        @current-change="hotelCurrentChange"
        :total="amusementTotal"
        :page-size="12">
      </el-pagination>
    </div>

<!-- 购物习水 ok123 -->
    <div  v-if="this.$route.params.type === '2-5'" class="entertainment">
      <div
        class="entertainment-item"
        v-for="item in imgZoomDataShopping"
        :key="item.id"
        @click="toDetail(item)">
        <alone-img-zoom :aloneWidth="380" :aloneHeight="290" :imgZoomData="item">
          <span slot="content">
            <p class="eatMopUp">{{item.intro}}</p>
          </span>
        </alone-img-zoom>
      </div>
    </div>

    <div v-if="this.$route.params.type === '2-5'" class="pagination-con">
      <el-pagination
        layout="prev, pager, next"
        @current-change="hotelCurrentChange"
        :total="hotelTotalShopping"
        :page-size="12">
      </el-pagination>
    </div>

<!-- 游遍习水 ok123 -->
    <div  v-if="this.$route.params.type === '2-4'" class="entertainment">
      <div
        class="entertainment-item"
        v-for="item in scenicDatas"
        :key="item.id"
        @click="toDetail(item)">
        <div class="alone-img-zoom" @mouseenter="mouseenterSight(item.id)">
          <div class="alone-cont">
            <span class="alone-span">{{ item.name }}</span>
            <div class="alone-all">
              <img class="alone-img" :src="item.thumbUrl" alt="">
            </div>
          </div>
          <span slot="content">
            <div class="tag">
              <el-tag type="success" v-if="item.level >= 3">
                <label v-for="index in item.level" :key="index">A</label>景区
              </el-tag>&nbsp;
              <!-- <el-tag type="success" v-if="item.level < 3">其他</el-tag>&nbsp; -->
              <el-tag type="success">景区评分: {{ item.rate }}分</el-tag>
            </div>
            <p class="eatMopUp">{{ item.introduction }}</p>
          </span>
        </div>
      </div>
    </div>
    <div v-if="this.$route.params.type === '2-4'" class="pagination-con">
      <el-pagination
        layout="prev, pager, next"
        @current-change="scenicCurrentChange"
        :page-size="scenicPageSize"
        :total="scenicTotal">
      </el-pagination>
    </div>

<!-- 交通习水 -->
    <div v-if="this.$route.params.type === '2-3'">

      <div v-for="(item, index) in trafficListData" :key="item.id">
        <div class="traffic-all" v-if="index%2 === 0">
          <div class="traffic" @click="toDetail(item)">
            <alone-img-zoom :aloneWidth="400" :aloneHeight="320" :imgZoomData="item"></alone-img-zoom>
            <div class="traffic-right">
              <div class="traffic-title">
                <img :src="require('_as/c-t-1.png')" alt="">
                <span class="title-span">{{item.title}}</span>
              </div>
              <p class="traffic-p">{{item.intro}}</p>
              <span class="traffic-btn">查看详情</span>
            </div>
          </div>
        </div>

        <div class="traffic-all"  v-if="index%2 === 1">
          <div class="traffic" @click="toDetail(item)">
            <div class="traffic-right">
              <div class="traffic-title">
                <img :src="require('_as/c-t-2.png')" alt="">
                <span class="title-span">{{item.title}}</span>
              </div>
              <p class="traffic-p">{{item.intro}}</p>
              <span class="traffic-btn">查看详情</span>
            </div>
            <alone-img-zoom :aloneWidth="400" :aloneHeight="320" :imgZoomData="item"></alone-img-zoom>
          </div>
        </div>
      </div>
      <div class="downLoadCode">
        <img :src="require('_as/Andriod.png')" alt="">
        <span>通村村Andriod下载二维码</span>

        <img :src="require('_as/IOS.png')" alt="">
        <span>通村村IOS下载二维码</span>
      </div>
    </div>

<!-- 旅游路线 -->
    <div v-if="this.$route.params.type === '2-7'">
      <spanImgCardZoom  @toPlayStrategyDetail="toDetail" :sightseeingTabData="sightseeingTabData"></spanImgCardZoom>
    </div>

    <div v-if="this.$route.params.type === '2-7'" class="pagination-con">
      <el-pagination
        layout="prev, pager, next"
        @current-change="hotelCurrentChange"
        :page-size="12"
        :total="sightseeingTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ImgCard from '_c/imgCard/img_card'

import spanImgCardZoom from '_c/spanImgCardZoom/span_card_zoom'

import AloneImgZoom from '_c/aloneImgZoom/alone_img_zoom'
import Tab from '_c/tab/tab'
import homeImg from '_as/homeImg.png'
import homeImgBg from '_as/homeImg_bg.png'
export default {
  name: 'SightseeingTourSecondary',
  data () {
    return {
      showBorder: {
        type: Boolean,
        default: true
      },
      homeImg,
      homeImgBg,
      // 酒店数据
      hotelPageNum: 1,
      hotelPageSize: 12,
      hotelTotal: 0,
      hotelTotalEat: 0,
      hotelTotalEatSing: 0,
      hotelTotalShopping: 0,
      hotelDatas: [],
      // 实在习水
      eatAllData: [],
      pageNumEat: 1,
      tabEat: '0',
      // 景区数据
      scenicPageNum: 1,
      scenicPageSize: 12,
      scenicTotal: 0,
      scenicDatas: [],
      // 美食数据
      foodPageNum: 1,
      foodPageSize: 6,
      foodTotal: 0,
      foodDatas: [],
      // 娱享习水
      amusementListData: [],
      amusementTotal: 0,
      sightseeingTabData: [],
      imgZoomDataEat: [],
      imgZoomDataShopping: [],
      amusementNum: 1,
      // 交通习水
      trafficListData: [],
      // 食在习水tab
      tabsEat: [
        {
          tabIndex: '0',
          tabTitle: '习水名菜'
        },
        {
          tabIndex: '1',
          tabTitle: '餐饮名店'
        },
        {
          tabIndex: '2',
          tabTitle: '习水美食街'
        }
      ],
      // 娱享习水tab
      amusementTabs: [
        {
          tabIndex: '0',
          tabTitle: '全部'
        },
        {
          tabIndex: '1',
          tabTitle: '酒吧'
        },
        {
          tabIndex: '2',
          tabTitle: '茶馆'
        },
        {
          tabIndex: '3',
          tabTitle: '足道'
        },
        {
          tabIndex: '4',
          tabTitle: '传统体验'
        }
      ],
      pageNumShopping: 1,
      sightseeingTotal: 0,
      tabItemShowNum: '0'
    }
  },
  components: {
    ImgCard,
    AloneImgZoom,
    Tab,
    spanImgCardZoom
  },
  computed: {},
  watch: {
    '$route' (to, from) {
      this.initBreadcrumb()
    }
  },
  created () {
    this.initBreadcrumb()
    this.getHotelData(this.hotelPageNum, this.hotelPageSize)
    this.getScenicData(this.scenicPageNum, this.scenicPageSize)
  },
  mounted () {
  },
  methods: {
    // 数据初始化,数据监听----------------------------------------------------------------------------------
    initBreadcrumb () {
      if (this.$route.params.type === '2-2') {
        this.breadcrumbCon = '住在习水'
      }
      if (this.$route.params.type === '2-6') {
        this.breadcrumbCon = '娱享习水'
        this.getAmusementList(1)
      }
      if (this.$route.params.type === '2-1') {
        this.breadcrumbCon = '食遍习水'
        this.getEatAllSingleData(1)
      }
      if (this.$route.params.type === '2-5') {
        this.breadcrumbCon = '购物习水'
        this.getShoppingListData(1)
      }
      if (this.$route.params.type === '2-4') {
        this.breadcrumbCon = '游遍习水'
      }
      if (this.$route.params.type === '2-3') {
        this.breadcrumbCon = '交通习水'
        this._getTrafficListData()
      }
      if (this.$route.params.type === '2-7') {
        this.breadcrumbCon = '旅游路线'
        this.getplayStrategyListData(1)
        this.getplayStrategyTotal()
      }
    },
    // 选页时触发
    hotelCurrentChange (pageNum) {
      switch (this.$route.params.type) {
        case '2-1':
          if (this.tabEat === '0') {
            this.getEatAllSingleData(pageNum)
          } else if (this.tabEat === '1') {
            this.getEatStoreData(pageNum)
          }
          break
        case '2-2':
          this.hotelPageNum = pageNum
          this.getHotelData(pageNum, this.hotelPageSize)
          break
        case '2-6':
          this.getAmusementList(pageNum)
          break
        case '2-5':
          this.getShoppingListData(pageNum)
          break
        case '2-7':
          this.getplayStrategyListData(pageNum)
          break
        default:
          break
      }
    },
    // 获取酒店数据----------------------------------------------------------------------
    getHotelData (pageNum, pageSize) {
      this.$http.get('/v1/hotels', { pageNum, pageSize }).then(res => {
        this.hotelDatas = res.data
        this.hotelTotal = res.total
      }).catch(err => {
        console.log(err)
      })
    },
    // 酒店item点击事件
    hotelItemClick (item) {
      this.$router.push({
        path: `/hotelDetail/${item.id}/${item.name}`
      })
    },
    // 景区选页时触发
    scenicCurrentChange (pageNum) {
      this.scenicPageNum = pageNum
      this.getScenicData(pageNum, this.scenicPageSize)
    },
    mouseenterSight (index) {
      this.$emit('mouseenterSight', index)
    },
    tabClick (item) {
      this.getAmusementList(1)
    },
    // 食在习水tab点击----------------------------------------------------------------------------
    tabClickEat (item) {
      this.tabItemShowNum = item.tabIndex
      if (item.tabIndex === '0') {
        this.getEatAllSingleData()
        this.tabEat = '0'
      } else if (item.tabIndex === '1') {
        this.getEatStoreData()
        this.tabEat = '1'
      } else {
        setTimeout(() => {
          this.initStreetMap()
        }, 80)
      }
    },
    // 食在习水“名菜”数据获取
    getEatAllSingleData (pageNumEat) {
      this.$http.get('/v2/food', {
        pageSize: 12,
        pageNum: pageNumEat
      }).then(res => {
        this.hotelTotalEatSing = res.total
        let empt = []
        res.data.forEach(item => {
          empt.push({
            'id': item.id,
            'title': item.dishesName,
            'imgZoomItem': item.dishesImages,
            'dishesIntro': item.dishesIntro,
            'type': 1
          })
        })
        this.eatAllData = empt
      })
    },
    // 食在习水“名店”列表数据获取
    getEatStoreData (pageNumEat) {
      this.$http.get('/v2/storeFood', {
        pageSize: 12,
        pageNum: pageNumEat
      }).then(res => {
        this.hotelTotalEat = res.total
        let empt = []
        res.data.forEach(item => {
          empt.push({
            'id': item.id,
            'title': item.name,
            'imgZoomItem': item.storeUrl,
            'dishesIntro': item.feature,
            'type': 2
          })
        })
        this.eatAllData = empt
      })
    },
    // 获取景区列表数据-- 有contentId --
    getScenicData (pageNum, pageSize) {
      this.$http.get('/v1/scenic', {
        pageNum: pageNum,
        pageSize: pageSize
      }).then(res => {
        const empt = []
        res.data.forEach(item => {
          empt.push({
            'id': item.id,
            'name': item.name,
            'thumbUrl': item.thumbUrl,
            'level': item.level,
            'rate': item.rate,
            'introduction': item.introduction,
            'type': 4,
            'contentId': item.contentId,
            'title': item.name
          })
        })
        this.scenicDatas = empt
        this.scenicTotal = res.total
      }).catch(err => {
        console.log(err)
      })
    },
    // 购物习水列表数据获取-- 有contentId --
    getShoppingListData (pageNumShopping) {
      this.$http.get('/v1/featureProduct', {
        pageSize: 12,
        pageNum: pageNumShopping
      }).then(res => {
        this.hotelTotalShopping = res.total
        let empt = []
        res.data.forEach(item => {
          empt.push({
            'id': item.id,
            'title': item.name,
            'imgZoomItem': item.thumbUrl,
            'intro': item.intro,
            'type': 3,
            'contentId': item.contentId
          })
        })
        this.imgZoomDataShopping = empt
      })
    },
    // 娱享习水列表数据获取-- 有contentId --
    getAmusementList (amusementNum) {
      this.$http.get('/v2/amusementList', {
        pageSize: 12,
        pageNum: amusementNum
      }).then(res => {
        this.amusementTotal = res.total
        const empt = []
        let aloneTag = ''
        res.data.forEach(item => {
          switch (item.type) {
            case 1:
              aloneTag = '酒吧'
              break
            case 2:
              aloneTag = '茶馆'
              break
            case 3:
              aloneTag = '足道'
              break
            case 4:
              aloneTag = '传统体验'
              break
            case 5:
              aloneTag = '尊荣会'
              break
            default:
              break
          }
          empt.push({
            'id': item.id,
            'title': item.title,
            'imgZoomItem': item.thumb,
            'phone': item.phone,
            'address': item.address,
            'typeAmusement': item.type,
            'type': 5,
            'aloneTag': aloneTag,
            'contentId': item.contentId
          })
        })
        this.amusementListData = empt
      })
    },
    // 交通习水列表数据获取-- 有contentId --
    _getTrafficListData () {
      this.$http.get('/v2/trafficRoutes', {
        pageSize: 1000
      }).then(res => {
        const empt = []
        res.data.forEach(item => {
          empt.push({
            'id': item.id,
            'title': item.title,
            'intro': item.intro,
            'contentId': item.contentId,
            'imgZoomItem': item.thumbUrl,
            'type': 7
          })
        })
        this.trafficListData = empt
      })
    },
    // 获取攻略total-------------------------------------------------------------------
    getplayStrategyTotal () {
      this.$http.get('/v1/playStrategyCount').then(res => {
        this.sightseeingTotal = res
      })
    },
    // 游记攻略列表数据获取
    getplayStrategyListData (pageplayStrategyNum) {
      this.$http.get('/v2/travelAgency', {
        pageSize: 12,
        pageNum: pageplayStrategyNum,
        type: 2
      }).then(res => {
        const empt = []
        res.data.forEach(item => {
          empt.push({
            'id': item.id,
            'firstImg': item.thumbUrl,
            'title': item.title,
            'intro': item.intro,
            'type': 7,
            'contentId': item.contentId
          })
        })
        this.sightseeingTabData = empt
      })
    },
    // 点击进入详情------------------------------------------------------------------------------
    toDetail (item) {
      if (this.$route.params.type === '2-3' || this.$route.params.type === '2-4' || this.$route.params.type === '2-5' || this.$route.params.type === '2-6' || this.$route.params.type === '2-7') {
        this.$router.push({
          path: '/sightseeing_tour_details',
          query: {
            id: item.id,
            title: item.title,
            type: item.type,
            intro: item.intro,
            contentId: item.contentId
          }
        })
      } else {
        this.$router.push({
          path: '/sightseeing_tour_details',
          query: {
            id: item.id,
            title: item.title,
            type: item.type
          }
        })
      }
    },
    // 顶部面包屑
    toSightseeingTour () {
      this.$router.push('/sightseeing_tour')
    },
    // 初始化美食街地图
    initStreetMap () {
      const map = new AMap.Map('StreetOfDelicacies', {})
      AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {
        if (!PathSimplifier.supportCanvas) {
          alert('当前环境不支持 Canvas！')
          return
        }
        // 预设置一些颜色
        const colors = ['#3366cc', '#dc3912']
        const pathSimplifierIns = new PathSimplifier({
          zIndex: 100,
          // autoSetFitView:false,
          map: map, // 所属的地图实例
          getPath: function (pathData, pathIndex) {
            return pathData.path
          },
          getHoverTitle: function (pathData, pathIndex, pointIndex) {
            return pathData.name
          },
          renderOptions: {
            pathLineStyle: {
              dirArrowStyle: true
            },
            getPathStyle: function (pathItem, zoom) {
              const color = colors[pathItem.pathIndex]
              const lineWidth = 6
              return {
                pathLineStyle: {
                  strokeStyle: color,
                  lineWidth: lineWidth
                },
                pathLineSelectedStyle: {
                  lineWidth: lineWidth + 2
                },
                pathNavigatorStyle: {
                  fillStyle: color
                }
              }
            }
          }
        })
        pathSimplifierIns.setData([
          {
            name: '希望城美食街',
            path: [
              [106.198157, 28.319484], // 习水城市规划馆外面
              [106.199471, 28.322072] // 希望国际城外面
            ]
          },
          {
            name: '习酒美食一条街',
            path: [
              [106.19811, 28.328927], // 红二路尽头
              [106.198029, 28.327633] // 英杰纳酒店旁
            ]
          }
        ])
        const nav1 = pathSimplifierIns.createPathNavigator(0, {
          loop: true, // 循环播放
          speed: 75 // 巡航速度，单位千米/小时
        })
        nav1.start()
        const nav2 = pathSimplifierIns.createPathNavigator(1, {
          loop: true, // 循环播放
          speed: 50 // 巡航速度，单位千米/小时
        })
        nav2.start()
      })
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.breadcrumb {
  padding 20px 0 20px 15%
  display flex
  align-items center
  margin-bottom 20px
  box-shadow 0 0 10px 2px #ddd
}
.pagination-con {
  margin 20px 0
}
.title {
  border-bottom 1px solid #dddddd
  height 50px
  line-height 50px
  font-size 20px
  font-weight bold
  width 80%
  margin 0 auto
}
.sightseeing-ul {
  margin 10px 0 0 15px
  li {
    display flex
    align-items center
    margin 10px 0
    img {
      width 24px
      height 24px
      margin-right 10px
    }
    span {
      width 340px
      overflow hidden
      text-align left
      text-overflow ellipsis
      white-space nowrap
    }
  }
}
.entertainment {
  display flex
  justify-content center
  flex-wrap wrap
}
.entertainment-item {
  border 1px solid #ddd
  width 390px
  margin 10px
}
.eatMopUp {
  padding 10px 0 0 4px
  text-align left
  line-height 1.5
  height 72px
  overflow hidden
  overflow hidden
  text-overflow ellipsis
  white-space: unset
  display -webkit-box
  -webkit-line-clamp 3
  -webkit-box-orient vertical
  cursor default
}
.tag {
  text-align left
  margin 10px 0 5px 4px
}
.traffic-all {
  display flex
  justify-content center
  align-items center
  border-bottom 15px solid #fff
}
.traffic {
  width 1200px
  display flex
  justify-content space-between
  align-items center
  padding 10px
  background #F6F6F6
  .traffic-right {
    margin-left 20px
    text-align left
    width 800px
    .traffic-title {
      display flex
      align-items center
      img {
        width 30px
        height 30px
        margin 0 10px
      }
      .title-span {
        font-size 30px
      }
    }
    .traffic-p {
      margin 20px 0
      width 700px
      text-overflow: ellipsis
      overflow: hidden
      white-space: nowrap
    }
    .traffic-btn {
      padding 5px 10px
      border-radius 20px
      border 1px solid #ddd
      cursor default
    }
  }
}
.img_card {
  width 100%
  min-height 600px
}
.imgZoomBorder {
  border 1px solid #ddd
}
.img_card-all {
  margin 10px
  position relative
  width 380px
  height 435px
  display inline-block
  &:hover {
    .img-range {
      .img_card-con {
        transform scale(1.2)
      }
    }
  }
}
.img-range {
  overflow hidden
  width 380px
  height 270px
  .img_card-con {
    overflow hidden
    width 380px
    height 270px
    transition transform 1s
  }
}
.alone-img-zoom {
  position relative
  display inline-block
  margin 5px
  .alone-cont {
    height 400px
    position relative
    &:hover {
      .alone-span {
        height 100%
      }
      .alone-img  {
        transform scale(1.2)
      }
    }
  }
  .alone-span {
    position absolute
    bottom 0px
    left 0px
    color #fff
    background rgba(0,0,0,0.4)
    width 100%
    height 40px
    z-index 1
    display flex
    align-items center
    justify-content center
    transition height 0.7s
  }
  .alone-all {
    width 100%
    height 100%
    overflow hidden
    // position absolute
    // top 0
    // left 0
    .alone-img {
      transition transform 1s
      width 100%
      height 100%
    }
  }
}
.iconfont {
  margin-right 10px
  color #14E1FF
}
.downLoadCode {
  padding 10px
  background #F6F6F6
  width 1200px
  margin 0 auto
  span {
    // width 20px
    word-wrap break-word
    writing-mode lr-tb
    writing-mode vertical-lr
    margin 0 60px 0 10px
    height 260px
    vertical-align center
  }
}
</style>
